<script setup>
import { onMounted, ref } from 'vue'
import SelectCateAndLab from '../components/category/SelectCateAndLab.vue'
const titleFunction = [
  {
    type: 'button',
    text: '取消',
    typeButton: 'secondary ',
  },
  {
    type: 'button',
    text: '发布',
    typeButton: '',
  }
]
const uploadUrl = 'https://www.huohuo90.com:3005/upload'
const fileUrl = ref([
  {
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },{
    name: '默认图片',
    url: 'https://www.huohuo90.com:3005/logo/dafei.jpg',
  },
])
</script>

<template>
<div class="addGallery">
  <yk-space dir="vertical" :size="24" style="width:100%" class="addGallery-top">
    <div class="addGallery-topTitle">
      <top-title title="新建摄影图库" :titleFunction="titleFunction"/>
    </div>
    <yk-space :size="24" style="width:100%;height:698px;">
      <yk-space dir="vertical" :size="24" style="width:100%" class="addGallery-content-left">
        <div style="width:100%;height;">
          <yk-upload
            :upload-url="uploadUrl"
            :file-list="fileUrl"
            accept="*"
            desc="上传内容要求"
            :draggable="true"
          ></yk-upload>
        </div>
        <yk-scrollbar ref="scrollbar" :height="500">
          <yk-space class="addGallery-img" :size="24"  style="width:750px" wrap>
            <yk-space v-for="(item, index) in fileUrl" :key="index" class="addGallery-img-item">
              <yk-image
                src="https://www.huohuo90.com:3005/logo/yike.png"
                width="168"
                height="168"
                :is-lazy="true"
                title=" "
              >
                <template #extra>
                  <yk-space justify="between">
                    <span class="addGallery-img-btn">
                      <IconStarOutline/>
                    </span>
                    <span class="addGallery-img-delete">
                      <IconDeleteOutline/> 
                    </span>
                  </yk-space>
                </template>
              </yk-image>
            </yk-space>
          </yk-space>
        </yk-scrollbar>
      </yk-space>
      <div class="addGallery-content-right">
        <yk-space class="article-form" dir="vertical" :size="24" align="center">
          <yk-space>
              <yk-space dir="vertical" :size="24" align="center">
                <input  placeholder="请输入标题" class="addGallery-title"></input>
                <SelectCateAndLab />
              </yk-space>   
            </yk-space>
          <textarea placeholder="请输入简介" class="addGallery-introduction" rows="25"></textarea>
        </yk-space> 
      </div>
    </yk-space>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.addGallery {
  width:1200px;
  margin:0 auto;
  margin-top: 32px;
  .addGallery-top {

      .addGallery-img {
        :deep(.yk-image) {
          .yk-image__footer {
            line-height: 275px;
            
            &>div:nth-child(2) {
              width:100%;
            }
          }
        }
      }
    

    .addGallery-topTitle {
      padding: 16px 24px;
      background-color: @bg-color-l;
      width:100%;
      border-radius: 8px;
    }


    .addGallery-content-left {
      background-color: @bg-color-l;
      border-radius: 8px;
      padding:24px;

      :deep(.yk-upload) {
        .yk-upload__files {
          .yk-upload__draggle {
            height: 125px;
            .yk-upload-draggle {
              height: 125px;
              .yk-upload-draggle__icon {
                margin-top:15px;
                width: 30px !important;
                height: 30px !important;
              }
            }
          }
        }

        .yk-upload__file-list {
          display: none;
        }
      }

    }

    .addGallery-content-right {
      background-color: @bg-color-l;
      border-radius: 8px;
      height:100%;
      width:100%;
      padding:24px;

      .addGallery-introduction {
        resize: none;
        background-color: @bg-color-l;
        border: none;
        outline: none;
        width:100%;
      }

      .addGallery-title {
        font-size: 24px;
        font-weight: 600;
        background-color: @bg-color-l;
        border: none;
        outline: none;
        height:100%;

        ::placeholder {
          color: @gray-6;
        }
      }
    }
  }

}
</style>